import React, { useState } from "react";
import { NavLink } from "react-router-dom";
import { useMenu } from "../context/MenuContext";
import {
  UserOutlined,
  SettingOutlined,
  HomeOutlined,
  AppstoreOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  CalendarOutlined,
  FormatPainterOutlined,
  MinusOutlined,
  CheckCircleOutlined,
  FileTextOutlined
} from "@ant-design/icons";

// 图标映射
const iconMap = {
  UserOutlined: <UserOutlined />,
  SettingOutlined: <SettingOutlined />,
  HomeOutlined: <HomeOutlined />,
  AppstoreOutlined: <AppstoreOutlined />,
  CalendarOutlined: <CalendarOutlined />,
  FormatPainterOutlined: <FormatPainterOutlined />,
  MinusOutlined: <MinusOutlined />,
  CheckCircleOutlined: <CheckCircleOutlined />,
  FileTextOutlined: <FileTextOutlined />,
  // 其他图标...
};

function MenuItem({ menu, collapsed, parentPath = "",onOpenExternal, onRoute }) {
  const [open, setOpen] = useState(false);


  // 判断是否外链
  if (menu.external) {
    return (
      <li>
        <div
          onClick={() => {
            // 建议所有外链都用新窗口打开，避免 iframe 被拒绝
            window.open(menu.url, "_blank");
            // 如果你只想部分外链用 iframe，可以维护白名单：
            // if (允许iframe的url列表.includes(menu.url)) {
            //   onOpenExternal && onOpenExternal(menu.url);
            // } else {
            //   window.open(menu.url, "_blank");
            // }
          }}
          style={{
            display: "flex",
            alignItems: "center",
            padding: "8px 12px",
            borderRadius: 4,
            cursor: "pointer"
          }}
        >
          {iconMap[menu.icon] && (
            <span style={{ marginRight: collapsed ? 0 : 8, fontSize: 20 }}>{iconMap[menu.icon]}</span>
          )}
          {!collapsed && menu.name}
        </div>
      </li>
    );
  }

  // 有 children，渲染可折叠父菜单
  if (menu.children && menu.children.length > 0) {
    return (
      <li>
        <div
          onClick={() => setOpen(!open)}
          style={{
            display: "flex",
            alignItems: "center",
            padding: "8px 12px",
            borderRadius: 4,
            cursor: "pointer",
            userSelect: "none"
          }}
        >
          {iconMap[menu.icon] && (
            <span style={{ marginRight: collapsed ? 0 : 8, fontSize: 20 }}>{iconMap[menu.icon]}</span>
          )}
          {!collapsed && <span>{menu.name}</span>}
          {!collapsed && (
            <span style={{ marginLeft: "auto", fontSize: 12 }}>
              {open ? "▲" : "▼"}
            </span>
          )}
        </div>
        {open && !collapsed && (
          <ul style={{ listStyle: "none", paddingLeft: 24 }}>
            {menu.children.map(child => (
              <MenuItem
                key={child.path}
                menu={child}
                collapsed={collapsed}
                parentPath={`/${menu.path}`}
                onOpenExternal={onOpenExternal}
                onRoute={onRoute}
              />
            ))}
          </ul>
        )}
      </li>
    );
  }

  // 普通菜单项
  return (
    <li>
      <NavLink
        to={parentPath ? `${parentPath}/${menu.path}` : `/${menu.path}`}
        style={({ isActive }) => ({
          display: "flex",
          alignItems: "center",
          padding: "8px 12px",
          borderRadius: 4,
          background: isActive ? "#E3732F" : "transparent",
          color: isActive ? "#fff" : "#222",
          textDecoration: "none"
        })}
        onClick={() => onRoute && onRoute()}
      >
        {iconMap[menu.icon] && (
          <span style={{ marginRight: collapsed ? 0 : 8, fontSize: 20 }}>{iconMap[menu.icon]}</span>
        )}
        {!collapsed && menu.name}
      </NavLink>
    </li>
  );
}

export default function Menu({ onOpenExternal, onRoute }) {
  const { menus } = useMenu();
  const [collapsed, setCollapsed] = useState(false);

  return (
    <aside
      style={{
        width: collapsed ? 75 : 200,
        background: "#eee",
        padding: 16,
        minHeight: "calc(100vh - 96px)",
        transition: "width 0.2s",
        display: "flex",
        flexDirection: "column"
      }}
    >
      <nav style={{ flex: 1 }}>
        <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
          <li>
            <NavLink
              to="/page1"
              style={({ isActive }) => ({
                display: "flex",
                alignItems: "center",
                padding: "8px 12px",
                borderRadius: 4,
                background: isActive ? "#E3732F" : "transparent",
                color: isActive ? "#fff" : "#222",
                textDecoration: "none"
              })}
              onClick={() => onRoute && onRoute()}
            >
              <HomeOutlined style={{ marginRight: collapsed ? 0 : 8, fontSize: 20 }} />
              {!collapsed && "菜单项1"}
            </NavLink>
          </li>
          <li>
            <NavLink
              to="/page2"
              style={({ isActive }) => ({
                display: "flex",
                alignItems: "center",
                padding: "8px 12px",
                borderRadius: 4,
                background: isActive ? "#E3732F" : "transparent",
                color: isActive ? "#fff" : "#222",
                textDecoration: "none"
              })}
              onClick={() => onRoute && onRoute()}
            >
              <AppstoreOutlined style={{ marginRight: collapsed ? 0 : 8, fontSize: 20 }} />
              {!collapsed && "菜单项2"}
            </NavLink>
          </li>
          {/* 动态菜单递归渲染 */}
          {menus.map(menu => (
            <MenuItem
              key={menu.path}
              menu={menu}
              collapsed={collapsed}
              onOpenExternal={onOpenExternal}
              onRoute={onRoute}
            />
          ))}
        </ul>
      </nav>
      <button
        onClick={() => setCollapsed(!collapsed)}
        style={{
          marginTop: 16,
          width: "100%",
          background: "#ddd",
          border: "none",
          borderRadius: 4,
          padding: 8,
          cursor: "pointer"
        }}
      >
        {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
      </button>
    </aside>
  );
}